<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            display: inline-block;
            /* 行内块元素*/
            width: 400px;
            height: 300px;

            border: 1px solid red;
        }

        /* 矛盾： 1. 块级元素是可以设置宽高，但是无法并排显示  2. 行内元素是可以并排显示，但是不可以设置宽高。  但是在实际网页排布的时候，我们的很多元素都是需要 并排显示，同时还需要设置宽高的。*/

        /* 1. 行内块元素（兼具行内元素和块级元素的特性： 1. 并排 2. 设置宽高）基本不会出现在布局里面 2. 浮动（1. 并排 2. 设置宽高 3. 不会出现空格缝隙） 3. 定位 4. flex*/


    </style>
</head>
<body>


<div>Lorem ipsum dolor sit amet, consectetur.</div>

<div>Lorem ipsum dolor sit amet, consectetur.</div>

<a href="">百度</a>

</body>
</html>